<template>
    <div>
        <van-sticky>
            <van-nav-bar title="正文" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <p align="center" v-text="article.title" style="font-size:20px"></p>
        <!-- <div>作者id:{{article.founder}}</div> -->
        <p v-text="article.summary" style="font-size:15px"></p>
        <!-- <div>作者名字:{{article.founderName}}</div>
        <div>创建时间:{{article.creationTime}}</div> -->
        <van-divider />
        <div style="display:flex;justify-content: space-between;">
            <p v-text="article.founderName"></p>
            <p v-text="article.creationTime"></p>
            <van-icon name="eye-o" /> {{article.traffic}}
            <van-icon name="good-job-o" /> {{article.upNumber}}
            <van-icon name="down" /> {{article.downNumber}}
        </div>
        <img :src=article.pictureUrl height="180px" width="100%">

        <div v-html="article.content"></div>

        <van-button type="primary" @click="onUp">点赞</van-button>
        <van-button type="warning" @click="onDown">点踩</van-button>
        <van-button type="info" @click="onShare">分享</van-button>
        <van-button type="default" @click="onAttention">关注作者</van-button>
        <van-divider />
        <div v-if="article.bookNumber !=0" @click="onClick()">
            <van-col span="14">
                <P align="center" style="height:15px" v-text="book.name"></P>
                <P style="height:50px" v-text="book.summary"></P>
                <div style="height:15px;display:flex;justify-content: flex-end;">
                    价格:{{book.bookPrice}}
                    <van-tag plain v-if="book.status==0">创建中</van-tag>
                    <van-tag plain type="warning" v-if="book.status==1">待发货</van-tag>
                    <van-tag plain type="primary" v-if="book.status==2">发货中</van-tag>
                    <van-tag plain type="success" v-if="book.status==3">已完成</van-tag>
                    <van-tag plain type="danger" v-if="book.status==4">已取消</van-tag>
                </div>
            </van-col>
            <van-col span="1"> <img :src="book.pictureUrl" height="80px" width="140px"></van-col>
        </div>

        <van-dialog v-model="show" show-cancel-button @confirm="onConfirm()">
            <van-field label="说点什么吧" autosize type="textarea" v-model="shareFeeling" maxlength="100" show-word-limit />
        </van-dialog>
        <div style="height:50px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'editorElem',
    data() {
        return {
            show: false,
            article: {},
            book: {},
            shareFeeling: ""
        }
    },
    mounted() {
    },
    methods: {
        onClick() {
            this.$router.push({ path: this.redirect || '/commodity', query: { id: this.book.bookNumber } })
        },
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        // 点赞
        async onUp() {
            let res = await this.$http.upArticle({ id: this.article.articleNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast('点赞成功!');
            }
        },
        // 点踩
        async onDown() {
            let res = await this.$http.downArticle({ id: this.article.articleNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast('点踩成功!');
            }
        },
        // 分享
        onShare() { this.show = true },
        // 分享再次确认
        async onConfirm() {
            let data = {
                articleNumber: this.article.articleNumber,
                shareFeeling: this.shareFeeling
            }
            let res = await this.$http.addShare(data)
            if (res !== undefined && res.meta.status == 200) {
                Toast("分享成功")
            }
        },
        // 关注
        async onAttention() {
            let res = await this.$http.addAttention({ userNumber: this.article.founder })
            if (res !== undefined && res.meta.status == 200) {
                Toast('关注成功!');
            }
        },
        async getData(articleId) {
            if (articleId != undefined) {
                let res = await this.$http.getArticleById(articleId)
                if (res !== undefined && res.meta.status == 200) {
                    this.article = res.data
                    if (res.data.bookNumber != 0) {
                        let res2 = await this.$http.getBookById(res.data.bookNumber)
                        this.book = res2.data
                    }
                }
            }
            else
                this.article.articleNumber = 0
        },
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData(vm.$route.query.id)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
    // 当页面离开时
    // 这里思路是制作为用户阅读时间
    beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        to
        from
        next
        // window.console.log(this, 'beforeRouteLeave'); //当前组件实例
        // window.console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
        // window.console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
        // window.console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
        next();
    }

}




</script>

<style >
</style>